<template>
  <Dialog title="修改密码" v-model:show="dialogUpdatePassShow">
    <UserEdit />
  </Dialog>
  <div class="myInfo">
    <n-form
      ref="formRef"
      label-placement="left"
      :label-width="80"
      :model="formValue"
      :rules="rules"
    >
      <n-form-item class="buttonList">
        <n-button attr-type="button" @click="dialogUpdatePassShow = true">
          修改密码
        </n-button>
        <template v-if="isUpdateStatus">
          <n-button attr-type="button" @click="isUpdateStatus = false">
            取消编辑
          </n-button>
          <n-button attr-type="button" @click="handleValidateClick">
            保存
          </n-button>
        </template>
        <n-button v-else attr-type="button" @click="isUpdateStatus = true">
          编辑
        </n-button>
      </n-form-item>
      <div class="showInfo">
        <n-form-item label="账号" path="account">
          <div>{{ formValue.account }}</div>
        </n-form-item>
        <n-form-item label="昵称" path="nickname">
          <n-input
            v-if="isUpdateStatus"
            v-model:value="formValue.nickname"
            placeholder="输入昵称"
          />
          <div v-else>{{ formValue.nickname }}</div>
        </n-form-item>
        <n-form-item label="邮件" path="email">
          <n-input
            v-if="isUpdateStatus"
            v-model:value="formValue.email"
            placeholder="邮件"
          />
          <div v-else>{{ formValue.email }}</div>
        </n-form-item>
        <n-form-item label="openid" path="openid">
          <n-input
            v-if="isUpdateStatus"
            v-model:value="formValue.openid"
            placeholder="openid"
          />
          <div v-else>{{ formValue.openid }}</div>
        </n-form-item>
        <n-form-item label="身份" path="role">
          <div>{{ formValue.role }}</div>
        </n-form-item>
        <n-form-item label="注册日期" path="createTime">
          <div>{{ formValue.createTime }}</div>
        </n-form-item>
        <n-form-item label="头像" path="avatar">
          <Upload v-if="isUpdateStatus" v-model:fileUrl="formValue.avatar" />
          <n-image v-else width="100" :src="formValue.avatar" />
        </n-form-item>
      </div>
    </n-form>
  </div>
</template>

<script setup lang="ts">
import {
  type FormInst,
  NButton,
  NForm,
  NFormItem,
  NInput,
  NImage,
} from "naive-ui";
import {
  getUserInfo,
  type Users,
  myInfoUpdate as apiMyInfoUpdate,
} from "~/api/user";
import userStore from "~/stores/user";
const user = userStore();

useHead({
  title: "个人中心", //网站标题
});

definePageMeta({
  title: "个人中心",
});
const dialogUpdatePassShow = ref(false);
const isUpdateStatus = ref(false);
const formRef = ref<FormInst | null>(null);
const formValue = ref<Users>({
  id: "",
  account: "",
  nickname: "",
  avatar: "",
  email: "",
  openid: "",
  role: "",
  createTime: new Date(),
  updateTime: new Date(),
});
const rules = {
  user: {
    name: {
      required: true,
      message: "请输入姓名",
      trigger: "blur",
    },
    age: {
      required: true,
      message: "请输入年龄",
      trigger: ["input", "blur"],
    },
  },
  phone: {
    required: true,
    message: "请输入电话号码",
    trigger: ["input"],
  },
};
const handleValidateClick = (e: MouseEvent) => {
  e.preventDefault();
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      await apiMyInfoUpdate({
        nickname: formValue.value.nickname,
        avatar: formValue.value.avatar,
        email: formValue.value.email,
        openid: formValue.value.openid,
      });
      formValue.value = await getUserInfo();
      user.userInfo = formValue.value;
    } else {
      naiveui.message.error(errors[0][0].message ?? "表单验证错误");
    }
  });
};
onMounted(async () => {
  formValue.value = await getUserInfo();
});
</script>
<style lang="scss" scoped>
.showInfo {
  display: flex;
  flex-wrap: wrap;
  .n-form-item {
    width: 30%;
  }
}
.buttonList {
  :deep(.n-form-item-blank) {
    flex-direction: row-reverse;
    .n-button {
      margin: 0 5px;
    }
  }
}
</style>
